<template>
	<div class="send_captcha">
		<span @click="sendindCore">{{ captchaBtnVal }}</span>
	</div>
</template>
<script>
	let CAPTCHA, _count,verify;
	export default{
		props:{
			phone: {
				type: String,
				default: '',
			},
			captcha:{
				type: String,
				default: '',
			}
		},
		data(){
			return{
				sending: false,
				// captchaBtnVal: '',
				count: 0,
			}
		},
		created(){
			CAPTCHA = this._GLOBAL.config.captcha;
		},
		mounted(){
			this.$nextTick(()=>{
				// this.captchaBtnVal = CAPTCHA.before;
				this.count = CAPTCHA.delay;
			})
		},	
		computed:{
			captchaBtnVal(){
				if(!this.sending){
					return (this.count < 0 || this.count == 0) ?  CAPTCHA.after :  CAPTCHA.before;
				}else{
					return (this.count < 0 || this.count == 0) ?  CAPTCHA.after :  this.count + CAPTCHA.sending;
				}
			}
		},
		watch:{
			
		},
		methods:{
			sendindCore(){
				if(!this.$utils.isMobile(this.phone)){
					this.$alert('请输入手机号码')
					return;	
				}
				if(this.sending) return;
				this.sending = true;
				this.count = CAPTCHA.delay;

				this.$api.get(this.ApiPath.captch.sent,{
					phone: this.phone,
				},success=>{
					this.$alert(success.data.msg || CAPTCHA.success)
					this.countDown();
				})

				// this.captchaBtnVal = this.count + CAPTCHA.sending;
			},
			countDown(){
				_count = setInterval(()=>{
					this.count--;
					if(this.count == 0 || this.count < 0){
						// this.count = CAPTCHA.delay;
						clearInterval(_count);
						this.sending = false;
					}
				},1000)
				// CAPTCHA.delay
			},
			checkCaptcha(callback){
				this.$api.get(this.ApiPath.captch.verify,{
					phone: this.phone,
					captcha: this.captcha
				},success=>{
					verify = true;
					callback(verify)
				},fail=>{
					this.$alert(fail.data.message);
					verify = false;
					callback(verify)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/style/base/_color.scss';
	.send_captcha{
		position: absolute;
		right: 0;
		color: $blue;
	}
</style>